<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="../js/util/jquery-3.4.1.min.js"></script>
    <script src="../js/util/myAjax.js"></script>
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/layui/css/modules/layer/default/layer.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="demo-transfer" id="test7"></div>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
    });
    layui.use(['transfer', 'layer', 'util'], function(){
        var $ = layui.$
            ,transfer = layui.transfer
            ,layer = layui.layer
            ,util = layui.util;

        //模拟数据
        var data1 = [
            {"value": "1", "title": "李白"}
            ,{"value": "2", "title": "杜甫"}
            ,{"value": "3", "title": "苏轼"}
            ,{"value": "4", "title": "李清照"}
            ,{"value": "5", "title": "鲁迅"}
            ,{"value": "9", "title": "贤心"},
        ]
        console.log(data1)
        //实例调用
        transfer.render({
            elem: '#test7'
            ,data: data1
            ,height:300
            ,title:['未分组人员', '当前分组人员']
            ,id: 'key123' //定义唯一索引
            ,onchange: function(obj, index){
                // util.event('lay-demoTransferActive', {
                //     getData: function(othis){
                //         var getData = transfer.getData('key123'); //获取右侧数据
                //         // myAjax('/group',getData,'post');
                //         layer.alert(JSON.stringify(getData));
                //     }
                // });
                let name = '';
                for (var i = 0; i < obj.length; i++) {
                    name+=''+obj[i].title+'；'
                }
                var arr = ['添加人员', '移除人员'];
                layer.alert('<strong>'+ arr[index] + '</strong>：'+name+''); //获得被穿梭时的数据
                localStorage.setItem('groupPersonnel',name);
                localStorage.setItem('groupPersonnelNumber',obj.length);
            }
        })
        //批量办法定事件
        util.event('lay-demoTransferActive', {
            getData: function(othis){
                var getData = transfer.getData('key123'); //获取右侧数据
                // myAjax('/group',getData,'post');
                layer.alert(JSON.stringify(getData));
            }
        });

    });
</script>
</body>
</html>